<template>
  <div>
    <div class="container">
      <span><img src="~images/common/student_avatar.png" /></span>
      <span><img src="~images/common/stu_tel.png" /></span>
      <span>{{staff_base.staff_name}}</span>
      <span>{{staff_base.staff_sex}}</span>
      <span>{{staff_base.staff_sno | formateEmpty}}</span>
      <span>{{staff_base.staff_tel | formateEmpty}}</span>
      <span>11/13 晚归 2 小时 23 分钟</span>
      <span> 最后入闸时间 11/13 23:40</span>
      <span @click="$router.go(-1)"><img src="~images/default/call_back_dark.png" /></span>
      <span>（异常）学生联系方式</span>
      <span>
        <img src="~images/watermark/water_mark_concact.png" alt="">
      </span>
    </div>
    <div class="detail-container">
      <ConPersGroup
        title="宿舍信息"
        :cardName="roomateName"
        :persInfo="roommateData.base"
        :persArray="collegeTeacher.teacher"
        :cardIcon="`dormitory`"
      />
      <ConPersGroup
        title="班级信息"
        :cardName="collegeName"
        :persInfo="collegeTeacher.base"
        :persArray="collegeTeacher.teacher"
        :cardIcon="`class`"
      />
      <ConcactFamily
        :info="staff_base"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collegeTeacher: {}, //学院信息
      roommateData: {}, //宿舍信息
      staff_base: {}, //学生基本信息
      collegeName: '', // 班级卡片名称
      roomateName: '', //宿舍卡片名称
    }
  },
  created() {
    this.getStaffInfo()
  },
  methods: {
    getStaffInfo() {
      const id = this.$route.params.stuId
      this.$api.panel.getStaffInfo({ 'staff_id': id }).then(res=> {
        console.log(res)
        const data = {
          'staff_base':{
            'id':1,
            'staff_sno':'20201208',
            'staff_name':'1号学生姓名',
            'staff_sex':1,
            'staff_tel':'17896756556',
            'staff_urgent_name':'宋美龄',
            'staff_urgent_tel':'13122223333',
            'staff_urgent_relation':'母亲',
            'staff_dormitory':1,
            'staff_building':1,
            'class_name':'1班级',
            'class_year':'1年级',
            'class_teacher':1,
            'pro_name':'专业',
            'college_name':'信息工程学院',
            'college_fir':1,
            'college_sec':1,
          },
          'roommateData':{
            'base':{
              'name':'第二学生公寓',
              'dormitory_number':'101',
              'one_admin':1,
              'two_admin':1,
              'three_admin':1,
            },
            'teacher':[
              {
                'admin_name':'superadmin',
                'admin_tel':null,
                'admin_category':5,
              },
              {
                'admin_name':'superadmin',
                'admin_tel':null,
                'admin_category':5,
              },
              {
                'admin_name':'superadmin',
                'admin_tel':null,
                'admin_category':5,
              },
            ],
          },
          'collegeTeacher':{
            'base':{
              'college_name':'信息工程学院',
              'pro_name':'专业',
              'class_name':'汽修一班',
              'class_year':'19',
            },
            'teacher':[
              {
                'admin_name':'王老师',
                'admin_tel':13102263211,
                'admin_category': '学院负责人',
              },
              {
                'admin_name':'王老师',
                'admin_tel':13102263211,
                'admin_category': '学院负责人',
              },
              {
                'admin_name':'王老师',
                'admin_tel':13102263211,
                'admin_category': '学院负责人',
              },
            ],
          },
        }
        // const { collegeTeacher, roommateData, staff_base } = res.data
        this.collegeTeacher = data.collegeTeacher
        this.roommateData = data.roommateData
        this.staff_base = data.staff_base
        const collectBase = data.collegeTeacher.base
        const roommateBase = data.roommateData.base
        this.collegeName = `${collectBase.college_name} ${collectBase.class_year}${collectBase.class_name}`
        this.roomateName = `${roommateBase.name} ${roommateBase.dormitory_number}`
      })
    },
  },
}
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 158px;
   span {
    &:first-child {
      display: grid;
      place-items: center;
      position: absolute;
      top: 82px;
      left: 15px;
      width: 36px;
      height: 36px;
      border: 1px dashed #8c97b2;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &:nth-child(2) {
      display: grid;
      place-items: center;
      position: absolute;
      top: 90px;
      right: 112px;
      width: 20px;
      height: 20px;
      border: 1px dashed #8c97b2;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &:nth-child(3) {
      position: absolute;
      top: 84px;
      left: 63px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #002170;
    }
    &:nth-child(4) {
      position: absolute;
      top: 85px;
      left: 101px;
      width: 36px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8C97B2;
    }
    &:nth-child(5) {
      position: absolute;
      top: 104px;
      left: 63px;
      width: 55px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8C97B2;
    }
    &:nth-child(6) {
      position: absolute;
      top: 93px;
      right: 15px;
      width: 89px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8C97B2;
    }
     &:nth-child(7) {
      position: absolute;
      top: 126px;
      left: 63px;
      width: 142px;
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #DD563F;
    }
    &:nth-child(8) {
      position: absolute;
      top: 126px;
      left: 213px;
      width: 142px;
      width: 144px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #136FD1;
    }
    &:nth-child(9) {
      position: absolute;
      top: 23px;
      left: 19px;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &:nth-child(10) {
      position: absolute;
      top: 27px;
      left: 82px;
      height: 16px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #002170;
    }
    &:nth-child(11) {
      img {
        position: absolute;
        top: 0;
        right: 0;
        width: 136px;
        height: 69px;
      }
    }
  }
}
.detail-container {
  padding: 15px;
  background: #0A2463;
  border-radius: 10px 10px 0px 0px;
}
</style>